<template>
  <div class="douyinfabu">
    <top></top>
    <div class="center">
      <left></left>
      <div class="right" v-loading="loading">
        <div class="where">当前位置：分销后台><router-link to="/productionDelivery2/douyin">抖音推广商品</router-link>
        </div>
        <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
        <div style="padding: 15px 20px; border-bottom: 1px #EAEAEA solid; font-size: 16px;">定义H5销售页信息</div>
        <div style="padding: 50px;">
          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>商品名称
            </div>
            <div class="f2">
              <el-input v-model="all.sale_name"></el-input>
            </div>
            <div style="color: #999; font-size: 14px; margin-left: 10px;">对外展示的产品标题，能清晰描述概括产品，例：北京19元月租大王卡赠2GB流量</div>
          </div>
          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>商品价格
            </div>
            <div class="f2">
              <el-input v-model="all.price"></el-input>
            </div>

          </div>
          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>商品排序
            </div>
            <div class="f2">
              <el-input v-model="all.order"></el-input>
            </div>
          </div>
          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>选号
            </div>
            <div class="f2">
                <el-radio v-model="all.pick_number" :label="0">不选号</el-radio>
                <el-radio v-model="all.pick_number" :label="1">选号</el-radio>
            </div>
          </div>

          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>月租
            </div>
            <div class="f2">
              <el-input v-model="all.yuezu"></el-input>
            </div>
          </div>
          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>流量
            </div>
            <div class="f2">
              <el-input v-model="all.liuliang"></el-input>
            </div>
          </div>
          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>语音
            </div>
            <div class="f2">
              <el-input v-model="all.yuyin"></el-input>
            </div>
          </div>
          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>省市
            </div>
            <div class="f2">
              <el-cascader :options="options" style="width: 300px;" v-model="all.delivery_city" collapse-tags :props="props" clearable>
              </el-cascader>
            </div>
          </div>

          <!-- <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>省份
            </div>
            <div class="f2">
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :label="city.name" :key="city.code">{{city.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div> -->
          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>套餐优惠期
            </div>
            <div class="f2">
              <el-input v-model="all.taocan"></el-input>
            </div>
          </div>

          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>商品主图
            </div>
            <div class="f2">
              <el-upload class="avatar-uploader" action="#" :on-change="uploadok" :auto-upload="false"
                :show-file-list="false">
                <img v-if="all.pic" :src="all.pic" class="avatar">

                <i v-else class="el-icon-plus avatar-uploader-icon" style="color: #43B4FF; font-size: 40px;"></i>
              </el-upload>
            </div>
          </div>
          <div class="flex" style="margin-bottom: 20px;">
            <div class="fl">
              <span style="color: #f00; margin-right: 5px;">*</span>商品内容图
            </div>
            <div class="f2">
              <el-upload class="avatar-uploader" action="#" :on-change="uploadok2" :auto-upload="false"
                :show-file-list="false">
                <img v-if="all.details" :src="all.details" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" style="color: #43B4FF; font-size: 40px;"></i>
              </el-upload>
            </div>
          </div>
          <el-button type="danger" size="mini" @click="fabu" style="margin-left: 140px;">发布</el-button>
        </div>

      </div>
    </div>

    <foot></foot>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import {bufahuodiqu} from '../../assets/bufahuodiqu3.js'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: 'douyinfabu',
    data() {
      return {
        props: {
          multiple: true
        },
        options:bufahuodiqu,
        all: {
          page_id: "", //	是	string	商品id
          price: "", //	是	string	价格
          pic: "", //	是	string	主图
          details: "", //	是	string	主图
          order: "", //	是	string	排序
          sale_name: "",
          yuezu: "",
          liuliang: "",
          taocan: "",
          yuyin: "",
          json: "",
          tab: "",
          delivery_city: ""
        },
        loading: true,
        //选中城市
        checkedCities: [],
        //所有省
        cities: []

      }
    },
    created() {
      this.all.tab = this.$route.query.tab
      if (this.$route.query.id) {
        this.all.page_id = this.$route.query.id

      }
      if (this.$route.query.bianji) {
        this.getdetail()
      } else {
        this.loading = false
      }
      //请求地址
      this.getsheng()


    },
    methods: {
      //请求地址
      getsheng() {
        var that = this
        axios.get("https://static.91haoka.cn/areanew.json")
          .then(function(response) {
            // var arr=[]
            // arr.push(response.data.province_list)
            // for(var i=0;i<arr.length;i++){
            // 	that.cities.push({"code":arr})
            // }
            // console.log(Object.keys(response.data.province_list))

            for (var i = 0; i < Object.keys(response.data.province_list).length; i++) {
              that.cities.push({
                "code": Object.keys(response.data.province_list)[i],
                'name': response.data.province_list[Object.keys(response.data.province_list)[i]]
              })
            }
            // console.log(that.cities)

          })
      },

      //复选
      handleCheckedCitiesChange(value) {
        console.log(this.checkedCities)
      },
      getdetail: function() {
        axios.get('/api/plan-market/web/page/info?id=' + this.$route.query.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log(response.data.data.delivery_area)
              if (response.data.data.delivery_area != null) {
                this.checkedCities = response.data.data.delivery_area.split(",");
              }

              this.all = response.data.data
              if (this.all.json) {
                let obj = JSON.parse(this.all.json)
                this.$set(this.all, 'yuezu', obj.yuezu)
                this.$set(this.all, 'liuliang', obj.liuliang)
                this.$set(this.all, 'taocan', obj.taocan)
                this.$set(this.all, 'yuyin', obj.yuyin)
              } else {
                this.$set(this.all, 'yuezu', '')
                this.$set(this.all, 'liuliang', '')
                this.$set(this.all, 'taocan', '')
                this.$set(this.all, 'yuyin', '')
              }

              if (this.all.delivery_city) {
                this.all.delivery_city = JSON.parse(this.all.delivery_city).ssq
              }


            } else {
              this.$message.error(response.data.msg.info);
            }
            this.loading = false
          })
      },
      fabu: function() {
        if (this.all.sale_name == '') {
          this.$message.error('请输入标题');
          return false
        }
        if (this.all.price == '') {
          this.$message.error('请输入价格');
          return false
        }
        if (this.all.pic == '') {
          this.$message.error('请输入主图');
          return false
        }
        if (this.all.details == '') {
          this.$message.error('请输入内容图');
          return false
        }

        if (this.all.order == '') {
          this.$message.error('请输入排序');
          return false
        }
        // if (this.checkedCities.length == 0) {
        //   this.$message.error('请选择省份');
        //   return false
        // }
        let obj = {
          yuezu: this.all.yuezu,
          liuliang: this.all.liuliang,
          taocan: this.all.taocan,
          yuyin: this.all.yuyin,

        }
        this.all.json = JSON.stringify(obj)
        // this.all.delivery_area = this.checkedCities.toString()

        if (this.all.delivery_city) {
          let data = {
            ssq: this.all.delivery_city
          }
          this.all.delivery_city = JSON.stringify(data)
        }

        this.loading = true
        axios.post('/api/plan-market/web/page/make', this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('发布成功');
              this.$router.push({
                path:'/productionDelivery2/douyin',
                query:{
                  tab:this.all.tab
                }
              })

            } else {
              this.$message.error(response.data.msg.info);
            }
            this.loading = false
          })
      },
      //单个图片上传
      uploadok: function(file) {
        console.log(file)
        if (file.raw.type != 'image/jpeg' && file.raw.type != 'image/png' && file.raw.type != 'image/jpg') {
          this.$message.error('只能上传图片');
          return false
        }
        var that = this;
        var formData = new FormData();
        formData.append("pic", file.raw);
        axios.post('/api/plan-market/order-page/upload-pic', formData)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.all.pic = response.data.data
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //单个图片上传
      uploadok2: function(file) {
        console.log(file)
        if (file.raw.type != 'image/jpeg' && file.raw.type != 'image/png' && file.raw.type != 'image/jpg') {
          this.$message.error('只能上传图片');
          return false
        }

        var that = this;
        var formData = new FormData();
        formData.append("pic", file.raw);
        axios.post('/api/plan-market/order-page/upload-pic', formData)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.all.details = response.data.data
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .douyinfabu {
    margin: 0;
    padding: 0;
    background: #EFEFEF;

    .center {
      width: 1366px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .right {
        flex-basis: 1166px;
        background: #FFF;

        .el-upload {
          width: 200px;
          height: 200px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px #EAEAEA solid;

        }

        .avatar-uploader {
          img {
            max-width: 100%;
          }
        }

        .flex {
          display: flex;
          align-items: center;
        }

        .fl {
          width: 120px;
          text-align: right;
          margin-right: 20px;
        }

        .f2 {
          width: 300px;
        }

        .el-pagination {
          text-align: right;
          margin: 20px 0
        }

      }

    }

    .basispro {
      margin-top: 20px;
    }
  }
</style>
